<template>
	<view>
		<view>
			<view class="head-box">
				<navigator :url="'/pages/integral-subsidiary/index?eid='+userInfo.eid" class="jfmx" hover-class="none">
					积分明细</navigator>
				<!-- 个人信息 -->
				<view class="flex-space ">
					<view class="info-l flex-align">
						<image :src="userInfo.headIcon" class="userImg"></image>
						<view class="info-text ">
							<view class="day-text">已连续签到<text class="day-t">{{userInfo.continuityDays}}</text>天 </view>
							<view class="jf-text">明日签到可获得{{userInfo.tomorrowIntegral}}积分</view>
						</view>
					</view>
					<view class="info-r flex-center">
						<image src="../../static/image/page/jinbi.png" class="jinbi"></image>
						<text class="jb-num">{{userInfo.total}}</text>
					</view>
				</view>
			</view>
			<!-- 签到信息 -->
			<view class="qd-box">
				<view class="qiandao">
					<view class="qd-title">连续签到得积分</view>
					<view class="flex-space">
						<view v-for="(item,index) in signList" :key="index" class="qd-item">
							<view class="qd-card qd-card-active" v-if="userInfo.continuityDays>index">
								<text>{{item.itemValue}}</text>
								<image src="../../static/image/page/gou.png" class="gou"></image>
							</view>
							<view class="qd-card" v-else>
								<text>{{item.itemValue}}</text>
								<image src="../../static/image/page/jinbi1.png" class="jinbi1"></image>
							</view>
							<text class="qd-day">{{item.description}}</text>
						</view>
					</view>
					<!-- 签到按钮 -->
					<view class="blue-btn qd-btn" @click="confirm">{{isSignToday?'今日已签到':'立即签到'}}</view>
				</view>

			</view>
			<!-- 任务奖励 -->
			<view class="rwjl-box">
				<view class="rwjl">
					<view class="qd-title flex-space">
						<text>任务奖励</text>
						<navigator url="/pages/integral-rules/index" class="guize flex-center">
							<text> 奖励规则</text>
							<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
						</navigator>
					</view>
					<view class="rw-list flex-space">
						<navigator url="/pages/userInvite/userInvite" class="rw-item flex-1 flex-align flex-dir">
							<image src="../../static/image/page/ludan.png" class="rwjl-icon"></image>
							<view class="rw-title">老带新</view>
							<view class="wr-jf">奖励积分</view>
							<text class="renwu-jf-num">50/次</text>
						</navigator>
						<view @click="tips" class="rw-item flex-1   flex-align flex-dir">
							<image src="../../static/image/page/haibao.png" class="rwjl-icon"></image>
							<view class="rw-title">分享海报</view>
							<view class="wr-jf">奖励积分</view>
							<text class="renwu-jf-num">100/次</text>
						</view>
						<navigator url="/pages/proImage/proImage" class="rw-item flex-1 flex flex-dir flex-align ">
							<image src="../../static/image/page/yonghu1.png" class="rwjl-icon"></image>
							<view class="rw-title">推广录单</view>
							<view class="wr-jf">奖励积分</view>
							<text class="renwu-jf-num">500/次</text>
						</navigator>
						<navigator url="/pages/orderInside/addOrder" class="rw-item flex-1 flex flex-dir flex-align ">
							<image src="../../static/image/page/fangkuan.png" class="rwjl-icon"></image>
							<view class="rw-title">录单放款</view>
							<view class="wr-jf">奖励积分</view>
							<text class="renwu-jf-num">5000/次</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品兑换 -->
		<view class="sp-box">
			<view class=" flex-center sp-title">
				<image src="../../static/image/page/zhaungshi.png" class="zhaungshi"></image>
				<text>商品兑换</text>
				<image src="../../static/image/page/zhaungshi.png" class="zhaungshi"></image>
			</view>
			<view class="sp-list">
				<view class="sp-item" v-for="(item,index) in list" :key="index" @click="exchange" :data-item="item">
					<image :src="item.url" class="sp-img"></image>
					<view class="sp-info">
						<view class="sp-item-title">{{item.name}}</view>
						<text class="price">价值￥{{item.realPrice}}</text>
						<view class="flex-space">
							<view class="flex-align">
								<text class="jifen-num">{{item.sellPrice}} </text>
								<text class="price">积分</text>
							</view>
							<view class="duihuan">立即兑</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 上拉触底无数据 -->
			<no-data v-if="isComplete"></no-data>
		</view>

		<!-- 签到成功弹层 -->
		<view class="qd-layer" v-if="isShowSignIn">
			<view class="qd-layer-box">
				<image src="../../static/image/page/qiandao.png" class="qiandao-img"></image>
				<view class="qd-con">
					<view class="flex-center">
						<image src="../../static/image/page/zhaunghsi.png" class="zhaunghsi"></image>
						<text class="qd-getjf"> 获得 <text class="qd-ji-num">{{signInInfo.now}}</text> 积分</text>
						<image src="../../static/image/page/zhaunghsi.png" class="zhaunghsi"></image>
					</view>
					<view class="jjhdjf">明天签到可得 <text>{{signInInfo.tomorrow}}</text> 积分</view>
					<view class="know-btn" @click="ok">知道了</view>
				</view>

			</view>
		</view>

		<!-- 兑换弹层 -->
		<view class="qd-layer" v-if="isShowExchange">
			<view class="dh-con">
				<text class="ad-titel">是否确认兑换？</text>
				<view class="dh-info">
					<image :src="currentGoods.url" class="dh-img"></image>
					<view class="dh-info-r">
						<view class="dh-sp-t">{{currentGoods.name}}</view>
						<text class="price">价值￥{{currentGoods.realPrice}}</text>
						<view class="flex-align">
							<text class="jifen-num">{{currentGoods.sellPrice}} </text>
							<text class="price">积分</text>
						</view>
					</view>
				</view>
				<view class="xh-jf">消耗<text>{{currentGoods.sellPrice}}</text>积分</view>
				<view class="flex-space">
					<view class="dh-btn" @click="close">暂不兑换</view>
					<view class="dh-btn dh-btn-r" @click="goExchange">确认兑换</view>
				</view>
			</view>

		</view>


	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}, //个人信息
				signList: [], //签到列表
				isSignToday: 0, //今日是否签到
				pageNo: 1,
				isLoading: false,
				isComplete: false,
				list: [], //商品列表
				isShowExchange: false, //是否显示兑换弹层
				isShowSignIn: false, //是否显示签到弹层
				signInInfo: {}, //签到成功信息
				currentGoods: {}, //当前商品
			}
		},
		onLoad(options) {
			this.getPersonInfo();
			this.getSignList();
			this.onIsSignToday();
			this.getCommodityInfo();
		},
		onReachBottom() {
			!this.isLoading && !this.isComplete && this.getCommodityInfo();
		},
		methods: {
			  //提示
			  tips(){
			    uni.showToast({
			      icon:'none',
			      title: '完善中...',
			    })
			  },
			//兑换
			goExchange() {
				uni.navigateTo({
					url: `/pages/shipping-address/index?uid=${this.userInfo.eid}&cid=${this.currentGoods.id}`,
				})
			},
			//关闭兑换弹层
			close() {

				this.isShowExchange = false;

			},
			ok() {

				this.isShowSignIn = false;

			},
			//兑换
			exchange(e) {
				// console.log(e)
				let item = e.currentTarget.dataset.item;
				this.$api.isEnough(item.id).then(res => {
					if (res.data.data) {
						//足够
						this.isShowExchange = true;
						this.currentGoods = item;
					} else {
						//积分不够
						uni.showModal({
							title: '温馨提示',
							content: '您的积分不足，快去做任务获得 更多积分',
							confirmColor: '#585CF7'
						})
					}
				})

			},
			//获取商品列表
			getCommodityInfo() {

				this.isLoading = true;
				this.$api.getCommodityInfo({
					pageNo: this.pageNo,
				}).then(res => {
					let data = res.data.data.records;
					this.list = this.list.concat(data);
					this.isLoading = false;
					this.isComplete = !data.length;
					this.pageNo = ++this.pageNo;
				})
			},
			//签到
			confirm() {
				if (!this.isSignToday) {
					this.$api.confirm().then(res => {
						this.isSignToday = 1;
						this.isShowSignIn = true;
						this.signInInfo = res.data.data;
					});
					this.getPersonInfo();
				} else {
					uni.showToast({
						icon: 'none',
						title: '今日已经签到过了哟~~',
					})
				}

			},
			//今日是否签到
			onIsSignToday() {
				this.$api.isSignToday().then(res => {
					this.isSignToday = res.data.data;
				})
			},
			//获取每日签到积分列表
			getSignList() {
				this.$api.plainDictionary('integral_rule').then(res => {
					this.signList = res.data.data;
				})
			},
			//获取个人信息
			getPersonInfo() {
				this.$api.getPersonInfo().then(res => {
					this.userInfo = res.data.data;
				})
			},
		}


	}
</script>

<style scoped>
	page {
		background-color: #f8f8f8;
	}

	.head-box {
		width: 100%;
		background-color: #585CF7;
		height: 350rpx;
		border-radius: 0 0 5% 5%;
		padding: 10rpx 30rpx 0;
	}

	.jfmx {
		text-align: right;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.userImg {
		width: 110rpx;
		height: 110rpx;
		border: 4rpx solid #FFFFFF;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info-text {}

	.day-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.day-t {
		color: #F9B721;
	}

	.jf-text {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.info-r {
		height: 80rpx;
		border: 2rpx solid #EAEEEF;
		border-radius: 40rpx;
		padding: 0 24rpx;
	}

	.jinbi {
		width: 50rpx;
		height: 50rpx;
		margin-right: 18rpx;
	}

	.jb-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.qd-box {
		padding: 0 30rpx;
		margin-top: -110rpx;
		margin-bottom: 20rpx;
	}

	.qiandao {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.qd-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 36rpx;
	}

	.qd-day {
		font-size: 22rpx;
		color: #999999;
	}

	.qd-card {
		width: 80rpx;
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		margin-bottom: 13rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #333333;
	}

	.qd-item {
		text-align: center;
	}

	.jinbi1 {
		width: 36rpx;
		height: 36rpx;
		margin-top: 15rpx;
	}

	.qd-card-active {
		background-color: #585CF7;
		color: #FFFFFF;
	}

	.gou {
		width: 28rpx;
		height: 21rpx;
		margin-top: 15rpx;
	}

	.qd-btn {
		margin-top: 48rpx;
	}

	/* 任务奖励 */
	.rwjl-box {
		padding: 0 30rpx;
	}

	.rwjl {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 35rpx 28rpx 48rpx;
	}

	.rwjl-icon {
		width: 80rpx;
		height: 80rpx;
		/* margin-right: 30rpx; */
	}

	.rw-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.wr-jf {
		font-size: 26rpx;
		font-weight: bold;
		color: #999999;
	}

	.rw-btn {
		width: 160rpx;
		height: 80rpx;
		background: #585CF7;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.rw-complete {
		background: #01DC70;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rw-jinbi {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.get-jf {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}



	/* 商品兑换 */

	.sp-box {
		padding: 0 30rpx;
		margin-top: 32rpx;
	}

	.sp-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 45rpx;
	}


	.zhaungshi {
		width: 48rpx;
		height: 21rpx;
		margin: 0 17rpx;
	}

	.sp-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.sp-item {
		width: 48.5%;
		background: #FFFFFF;
		border-radius: 10px;
		height: 545rpx;
		margin-bottom: 20rpx;
	}

	.sp-img {
		width: 100%;
		height: 335rpx;
		overflow: hidden;
	}

	.sp-info {
		padding: 0 18rpx;
	}

	.sp-item-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 36rpx;
		margin-bottom: 10rpx;
	}

	.price {
		font-size: 22rpx;
		color: #999999;
		line-height: 36rpx;
	}

	.duihuan {
		width: 120rpx;
		height: 46rpx;
		background: #585CF7;
		border-radius: 23rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		text-align: center;
	}

	.jifen-num {
		font-size: 32rpx;
		font-weight: bold;
		color: #FC4073;
		line-height: 36px;
		display: inline-block;
		margin-right: 6rpx;
	}

	/* 签到成功弹层 */
	.qd-layer {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qd-layer-box {
		text-align: center;
		margin-top: -100rpx;

	}

	.qiandao-img {
		width: 398rpx;
		height: 223rpx;
		position: relative;
		top: 65rpx;
	}

	.qd-con {
		width: 570rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		padding: 90rpx 0 0;

	}

	.zhaunghsi {
		width: 39rpx;
		height: 26rpx;
		margin: 0 15rpx;
	}

	.qd-getjf {
		font-size: 36rpx;
		font-weight: bold;
		color: #2A2A2A;
		display: flex;
		align-items: center;
	}

	.qd-ji-num {
		font-size: 50rpx;
		font-weight: bold;
		color: #EF8134;
		display: inline-block;
		transform: translateY(3px);
	}

	.jjhdjf {
		font-size: 30rpx;
		color: #999999;
		margin-top: 33rpx;
		margin-bottom: 63rpx;
	}

	.jjhdjf text {
		font-size: 32rpx;
		font-weight: bold;
		color: #EF8134;
	}

	.know-btn {
		width: 280rpx;
		height: 80rpx;
		background: #F6CB4B;
		border-radius: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
	}

	/* 兑换弹层 */
	.dh-con {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		padding: 60rpx 30rpx;
	}

	.ad-titel {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.dh-info {
		margin-top: 66rpx;
		display: flex;
		margin-bottom: 60rpx;
	}

	.dh-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.dh-info-r {
		flex: 1;
		text-align: left;
	}

	.dh-sp-t {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.xh-jf {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 47rpx;
	}

	.xh-jf text {
		color: #FC4073;
	}

	.dh-btn {
		width: 230rpx;
		height: 88rpx;
		border: 1rpx solid #999999;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #999999;
		line-height: 88rpx;
	}

	.dh-btn-r {
		color: #FFFFFF;
		background-color: #585CF7;
		border: none;
	}

	.dis-btn {
		background-color: #999999;
	}

	/* 修改任务奖励*/
	.guize {
		font-size: 24rpx;
		color: #999999;
		font-weight: normal;
	}

	.arrow-icon {
		width: 10rpx;
		height: 15rpx;
		margin-left: 10rpx;
	}


	.rwjl-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 18rpx;
	}

	.rw-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.wr-jf {
		font-size: 22rpx;
		color: #999999;
	}

	.renwu-jf-num {
		font-size: 22rpx;
		color: #F9AB10;
	}
</style>
